리액트기초_01_리액트의 동작 원리

1. 리액트는 왜 탄생했는가?

과거(jQuery 시절)에는 개발자가 DOM(화면 요소)을 직접 조작했다.

• "이 버튼을 누르면 저 텍스트를 빨간색으로 바꿔라." (명령형)
• 앱이 커질수록 "누가 어디서 화면을 바꿨는지" 추적하기 불가능해짐.

리액트는 이 문제를 해결하기 위해 등장했다.

• "데이터(State)가 바뀌면, UI는 알아서 업데이트된다." (선언형)

2. 가상 돔 (Virtual DOM)

리액트 속도의 핵심. 실제 DOM을 조작하는 건 매우 느리고 비싼 작업이다.

1. 데이터가 바뀌면, 리액트는 메모리에 새로운 가상 돔을 그린다. (빠름)
2. 이전 가상 돔과 새 가상 돔을 비교한다. (Diffing)
3. 바뀐 부분만 실제 DOM에 업데이트한다. (Reconciliation / 재조정)

3. 선언형 프로그래밍 (Declarative)

• 명령형: "택시를 잡아서, 기사님께 주소를 말하고, 우회전 좌회전을 지시해서 간다." (How)
• 선언형: "택시 앱에서 목적지 찍고 '이동' 누른다." (What)

리액트 개발자는 "화면이 어떻게 보여야 하는지(State)"만 정의하면 된다.
DOM을 어떻게 바꿀지(과정)는 리액트가 알아서 한다.